<template>
  <div id="categorygoods">
    <category-scroll :pull-up-load="true" class="content" ref="scroll">
      <div class="goods-list">
        <ul>
          <li v-for="(item, index) in goods" :key="index">
            <a :href="item.link">
              <img :src="item.image" alt="" @load="imageLoad" />
              <span>{{ item.title }}</span>
            </a>
          </li>
        </ul>
        <category-tab-control
          :titles="['综合', '新品', '销量']"
          class="title"
          @tabToggle="tabToggle"
        ></category-tab-control>

        <category-goods-list
          :goods-list="recommend[type]"
        ></category-goods-list>
      </div>
    </category-scroll>
  </div>
</template>

<script>
import CategoryScroll from '../../../components/common/Scroll/Scroll'
import CategoryTabControl from '../../../components/content/TabControl'
import CategoryGoodsList from '../../../components/content/GoodsList'

import { debounce } from '../../../network/utils'

export default {
  props: {
    goods: Array,
    recommend: Object
  },
  data() {
    return {
      type: 'pop',
      count: 0
    }
  },
  activated() {
    this.$refs.scroll.refresh()
  },
  components: {
    CategoryScroll,
    CategoryTabControl,
    CategoryGoodsList
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 200)
    this.$bus.$on('itemImageLoad', () => {
      refresh()
    })
  },
  methods: {
    // 推荐切换
    tabToggle(index) {
      switch (index) {
        case 0:
          this.type = 'pop'
          break
        case 1:
          this.type = 'new'
          break
        case 2:
          this.type = 'sell'
          break
      }
    },
    imageLoad() {
      if (!this.$refs.scroll) return
      //   const refresh = debounce(this.$refs.scroll.refresh, 100)
      //   refresh()

      if (++this.count === this.goods.length) this.$refs.scroll.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 100%;
}

#categorygoods {
  .goods-list {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px 10px;
    }
    li {
      width: 80px;
      text-align: center;
      font-size: 12px;
      padding: 0 5px;
      margin-bottom: 15px;
      img {
        width: 100%;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
